<template>
    <div class="flex-r flex-start bc13 pos-r" style="width: 100vw;min-height: 90vh">
        <div class="toggle-width pos-r bcf round5 mart5" :style="{width:sideBarExpand?'230px':'56px'}">
            <div style="height:65px;" class="bdbso flrc fs16 pad2 pos-r">
                <mu-button @click="sideBarToggle" icon color="primary" slot="left" v-if="$isMicro">
                    <mu-icon value="format_indent_increase" v-show="!sideBarExpand"></mu-icon>
                    <mu-icon value="format_indent_decrease" v-show="sideBarExpand"></mu-icon>
                </mu-button>
                <div class="pad5 fwb c1" v-show="sideBarExpand || !$isMicro">EZ</div>
                <div class="flex1 fwb" v-show="sideBarExpand">ADMIN</div>
<!--                <mu-icon class="pos-a t0 r0" color="error" size="24" value="bug_report" v-if="$env.NODE_ENV === 'development'"></mu-icon>-->
            </div>
<!--            <mu-paper>-->
                <mu-list toggle-nested :toggle-nested-type="sideBarExpand?'expand':'popover'">
                    <div>
                        <mu-list-item button active-class="bca01 bdrso bdc05 bdw5"
                                      :nested="leve1.children.length>0"
                                      :to="leve1.children.length>0?'':leve1.route"
                                      :open="level_1_open === leve1.route"
                                      @toggle-nested="level_1_open = arguments[0] ? leve1.route : ''"
                                      v-for="leve1 in menus" :key="`${leve1.route}_${leve1.id}`">
                            <mu-list-item-action v-if="leve1.icon !== ''" style="min-width: 32px!important;">
                                <mu-icon :value="leve1.icon" v-if="leve1.icon !== ''" size="20"></mu-icon>
                            </mu-list-item-action>
                            <div class="flex1" v-show="sideBarExpand">{{leve1.name}}</div>
                            <mu-icon :class="{'menu-close':level_1_open !== leve1.route,'menu-open':level_1_open === leve1.route}"
                                     v-if="leve1.children.length>0"
                                     value="expand_more" v-show="sideBarExpand">
                            </mu-icon>
                            <mu-list-item button slot="nested"  active-class="bca01 bdrso bdc05 bdw5"
                                          :nested="leve2.children.length>0"
                                          :to="leve2.children.length>0?'':leve2.route"
                                          :open="level_2_open === leve2.route"
                                          @toggle-nested="level_2_open = arguments[0] ? leve2.route : ''"
                                          v-for="leve2 in leve1.children" :key="leve2.route"
                            >
                                <mu-list-item-action v-if="leve2.icon !== ''" style="min-width: 32px!important;">
                                    <mu-icon :value="leve2.icon" size="20"></mu-icon>
                                </mu-list-item-action>
                                <div class="flex1">{{leve2.name}}</div>
                                <mu-icon :class="{'menu-close':level_2_open !== leve2.route,'menu-open':level_2_open === leve2.route}"
                                         v-if="leve2.children.length>0"
                                         value="expand_more">
                                </mu-icon>
                                <mu-list-item button slot="nested"  active-class="bca01 bdrso bdc05 bdw5"
                                              :to="leve3.children.length>0?'':leve3.route"
                                              v-for="leve3 in leve2.children" :key="leve3.route">
                                    <mu-list-item-action v-if="leve3.icon !== ''" style="min-width: 32px!important;">
                                        <mu-icon :value="leve3.icon" size="20"></mu-icon>
                                    </mu-list-item-action>
                                    <div class="flex1">{{leve3.name}}</div>
                                </mu-list-item>
                            </mu-list-item>

                        </mu-list-item>
                    </div>
                </mu-list>
<!--            </mu-paper>-->
        </div>
        <div class="flex1" style="width: 0">
            <div class="padl5 padr5" v-if="!$isMicro" :class="{padt5:!$isMicro}">
                <mu-appbar color="primary">
                    <mu-button @click="sideBarToggle" icon color="primary" slot="left">
                        <mu-icon value="format_indent_increase" v-show="!sideBarExpand"></mu-icon>
                        <mu-icon value="format_indent_decrease" v-show="sideBarExpand"></mu-icon>
                    </mu-button>
                    <div class="flrc">
                        <div>EZ Frame</div>
                        <div class="tar flex1">
                            <mu-text-field @focusin="focusSearch" @focusout="focusSearch" :class="{longger:isFocusSearch}" color="grey50" class="padl10 cf toggle-width" solo action-icon="search"></mu-text-field>
                        </div>
                        <div>
                            <mu-button icon @click="setTheme('teal')"></mu-button>
                        </div>
                        <div class="flcc padr10">
                            <mu-avatar color="success" size="48" v-if="!user.pic">A</mu-avatar>
                            <mu-avatar color="success" :size="48" v-if="!!user.pic && user.pic.url !== ''">
                                <img style="width: 48px;height: 48px;" :src="$http.root() + user.pic.url" alt="">
                            </mu-avatar>
                        </div>
                    </div>
                </mu-appbar>
            </div>

            <div>
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "v1-layout",
        data() {
            return {
                sideBarExpand: true,
                level_1_open: "",
                level_2_open: "",
                level_3_open: "",
                test: "",
                isFocusSearch:false,
                model:{},
                menus:[],
                user:{},
            }
        },
        created() {
            this.getMenu()
            this.user = this.$ezstore.auth.getUser()
        },
        methods: {
            sideBarToggle() {
                this.sideBarExpand = !this.sideBarExpand;
                this.open = '';
                this.test = this.$ezstore.auth.getIsLogin()
            },
            focusSearch(){
                this.isFocusSearch = !this.isFocusSearch
            },
            setTheme(){
                this.gotoLogin()
            },
            getMenu(){
                let pages = this.$ezstore.auth.getPages()
                if (this.$env.VUE_APP_EZ_APP_ID === ''){
                    //单体运行
                    this.menus = pages
                }else {
                    //服务运行
                    let menus = []
                    console.log("this is micro env")
                    console.log(this.$env)
                    for (let page of pages) {
                        if (page.appId === this.$env.VUE_APP_EZ_APP_ID){
                            menus = menus.concat(page.children)
                        }
                    }
                    this.menus = menus
                }

            }
        }
    }
</script>

<style scoped>
    .menu-close {
        transform: rotate(-90deg);
        transition: transform .2s;
    }

    .menu-open {
        transform: rotate(0deg);
        transition: transform .2s;
    }

    .toggle-width {
        transition: width .2s;
    }

    .longger {
        width: 300px;
    }
</style>